<template>
    <el-config-provider :locale="locale">
      <div class="main-layout">
        <!-- 顶部：标题和统计 -->
        <div class="top-section">
          <!-- 页面头部 -->
          <el-card class="header-card">
            <div class="header-content">
              <div class="title-section">
                <h1 class="main-title">
                  <el-icon class="title-icon"><Warning /></el-icon>
                  我的错题本
                </h1>
                <div class="subtitle">共 {{ total }} 道错题</div>
              </div>
              <div class="date-section">
                <div class="date">{{ currentDateComputed }}</div>
                <div class="time-greeting">{{ getTimeGreeting() }}</div>
              </div>
            </div>
          </el-card>

          <!-- 统计卡片 -->
          <el-card class="stats-card">
            <template #header>
              <div class="card-header">
                <el-icon class="header-icon"><TrendCharts /></el-icon>
                <span class="header-title">错题统计</span>
              </div>
            </template>
            
            <div class="stats-content">
              <div class="stat-item">
                <div class="stat-value">{{ total }}</div>
                <div class="stat-label">总错题数</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ favoriteCount }}</div>
                <div class="stat-label">已收藏</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ getMostWrongSubject() }}</div>
                <div class="stat-label">最常错科目</div>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 错题列表 -->
        <el-card class="question-card">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <el-icon class="header-icon"><List /></el-icon>
                <span class="header-title">错题列表</span>
                <div class="header-extra">
                  <el-tag type="danger" size="small">总错题数: {{ total }}</el-tag>
                  <el-tag type="warning" size="small">已收藏: {{ favoriteCount }}</el-tag>
                </div>
              </div>
            </div>
          </template>

          <!-- 搜索和筛选区域 -->
          <div class="filter-content">
            <div class="search-section">
              <el-input
                v-model="searchQuery"
                placeholder="搜索错题内容..."
                clearable
                @keyup.enter="handleSearch"
                class="search-input"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
                <template #append>
                  <el-button type="primary" @click="handleSearch">搜索</el-button>
                </template>
              </el-input>
            </div>
            <div class="filter-section">
              <el-select v-model="subjectCode" placeholder="筛选科目" clearable class="filter-select">
                <el-option v-for="item in subjectOptions" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
              <el-select v-model="examType" placeholder="考试类型" clearable class="filter-select">
                <el-option v-for="item in examTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-button type="primary" @click="handleSubjectChange" class="filter-btn">
                筛选
              </el-button>
            </div>
          </div>

          <div class="table-container">
            <el-table
              v-loading="loading"
              :data="questions"
              style="width: 100%"
              :header-cell-style="{
                background: '#f5f7fa',
                color: '#606266',
                fontWeight: 'bold'
              }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="content" label="题目内容" min-width="300">
                <template #default="{ row }">
                  <div class="question-content">
                    <div class="question-text">{{ row.content }}</div>
                    <div v-if="row.questionType === 'single_choice' && row.options && row.options.length > 0" class="options">
                      <div v-for="(option, index) in row.options" :key="index" class="option-item">
                        <span class="option-label">{{ getOptionLabel(index) }}</span>
                        <span class="option-content">{{ option }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="subjectName" label="科目" width="200" align="center">
                <template #default="{ row }">
                  <el-tag size="small" effect="plain">{{ row.subjectName || '未知' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="题型" width="150" align="center">
                <template #default="{ row }">
                  <el-tag size="small" :type="getQuestionTypeTag(row.questionType)">
                    {{ getQuestionTypeLabel(row.questionType) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="wrongCount" label="错误次数" width="100" align="center">
                <template #default="{ row }">
                  <el-tag type="danger" effect="dark">{{ row.wrongCount || 1 }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="lastWrongTime" label="最后错误时间" width="180" align="center">
                <template #default="{ row }">
                  {{ row.lastWrongTime ? new Date(row.lastWrongTime).toLocaleString() : '未知' }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150" align="center">
                <template #default="{ row }">
                  <div class="action-buttons">
                    <el-button
                      type="primary"
                      link
                      @click="showQuestionDetail(row)"
                      class="action-btn"
                    >
                      查看详情
                    </el-button>
                    <el-button 
                      :type="row.isFavorite ? 'warning' : 'default'"
                      link
                      @click="toggleFavorite(row)"
                      class="action-btn"
                    >
                      <el-icon :class="{ 'is-favorite': row.isFavorite }">
                        <Star v-if="!row.isFavorite" />
                        <StarFilled v-else style="color: #E6A23C" />
                      </el-icon>
                      {{ row.isFavorite ? '已收藏' : '收藏' }}
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>

        <!-- 题目详情弹窗 -->
        <el-dialog
          v-model="dialogVisible"
          title="题目详情"
          width="70%"
          :before-close="handleDialogClose"
          class="question-dialog"
        >
          <div v-if="currentQuestion" class="question-detail">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="科目">
                <el-tag size="small" effect="plain">{{ currentQuestion.subjectName || '未知' }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="题型">
                <el-tag size="small" :type="getQuestionTypeTag(currentQuestion.questionType)">
                  {{ getQuestionTypeLabel(currentQuestion.questionType) }}
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>

            <div class="detail-section">
              <h3>题目内容</h3>
              <div class="question-content" v-html="formatMathContent(currentQuestion.content)"></div>
            </div>

            <div v-if="currentQuestion.questionType === 'single_choice'" class="detail-section">
              <h3>选项</h3>
              <div class="options">
                <div v-for="(option, index) in currentQuestion.options" :key="index" class="option-item">
                  <span class="option-label">{{ getOptionLabel(index) }}</span>
                  <span class="option-content" v-html="formatMathContent(option)"></span>
                </div>
              </div>
            </div>

            <div class="detail-section">
              <h3>你的答案</h3>
              <div class="answer-content">
                <template v-if="currentQuestion.latestAnswer === null">
                  <span>未作答</span>
                </template>
                <template v-else>
                  <template v-if="currentQuestion.questionType === 'single_choice'">
                    <el-tag :type="currentQuestion.isCorrect ? 'success' : 'danger'" effect="dark">
                      <template v-if="currentQuestion.latestAnswer">
                        {{ String.fromCharCode(65 + parseInt(currentQuestion.latestAnswer) - 1) }}
                      </template>
                      <template v-else>
                        未作答
                      </template>
                    </el-tag>
                  </template>
                  <template v-else>
                    <div v-html="formatMathContent(currentQuestion.latestAnswer)"></div>
                  </template>
                </template>
              </div>
            </div>

            <div class="detail-section">
              <h3>正确答案</h3>
              <div class="answer-content">
                <template v-if="currentQuestion.questionType === 'single_choice'">
                  <el-tag type="success" effect="dark">{{ getOptionLabel(currentQuestion.answer) }}</el-tag>
                </template>
                <template v-else>
                  <div v-html="formatMathContent(currentQuestion.answer)"></div>
                </template>
              </div>
            </div>

            <div v-if="currentQuestion.analysis" class="detail-section">
              <h3>解析</h3>
              <div class="analysis-content" v-html="formatMathContent(currentQuestion.analysis)"></div>
            </div>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </el-config-provider>
  </template>
  
  <script setup>
  import { ref, onMounted, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Search, Warning, View, Star, StarFilled, List, TrendCharts, ChatDotRound } from '@element-plus/icons-vue'
  import axios from 'axios'
  import { useUserStore } from '@/store/user'
  import zhCn from 'element-plus/es/locale/lang/zh-cn'
  
  
  // 定义locale变量
  const locale = ref(zhCn)
  
  const router = useRouter()
  const userStore = useUserStore()
  const loading = ref(false)
  const questions = ref([])
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const searchQuery = ref('')
  const dialogVisible = ref(false)
  const currentQuestion = ref(null)
  const sortType = ref('count') // 'count', 'subject', 'time'
  const timeOrder = ref(false) // false for DESC, true for ASC
  const subjectCode = ref('')
  const examType = ref('')
  const subjectOptions = ref([
    { code: '', name: '全部' },
    { code: 'MATH001', name: '高等数学' },
    { code: 'MATH002', name: '线性代数' },
    { code: 'MATH003', name: '概率论与数理统计' }
  ])
  const examTypeOptions = ref([
    { value: '', label: '全部' },
    { value: '1', label: '数一' },
    { value: '2', label: '数二' },
    { value: '3', label: '数三' }
  ])
  
  // 修改 formatMathContent 函数
  const formatMathContent = (text) => {
    if (!text) return ''
    
    // 替换数学符号
    return text
      .replace(/\\mathrm{([^}]+)}/g, '<span class="math-rm">$1</span>')
      .replace(/\\int/g, '∫')
      .replace(/\\cos/g, 'cos')
      .replace(/\\sin/g, 'sin')
      .replace(/\\d/g, 'd')
      .replace(/\^{([^}]+)}/g, '<sup>$1</sup>')
      .replace(/\_{([^}]+)}/g, '<sub>$1</sub>')
      .replace(/\$/g, '')
      // 处理积分上下限
      .replace(/\\int_{([^}]+)}^{([^}]+)}/g, '∫<sub>$1</sub><sup>$2</sup>')
      // 处理 e 的指数
      .replace(/\\mathrm{e}/g, 'e')
      // 处理 t 的平方
      .replace(/t\^{2}/g, 't<sup>2</sup>')
      // 处理空格
      .replace(/\\~/g, ' ')
  }
  
  // 获取选项标签
  const getOptionLabel = (index) => {
    return String.fromCharCode(65 + index) + '.'
  }
  
  // 获取题型标签
  const getQuestionTypeLabel = (type) => {
    const types = {
      'single_choice': '选择题',
      'fill_in_the_blank': '填空题',
      'subjective': '主观题'
    }
    return types[type] || '未知'
  }
  
  // 获取题型标签样式
  const getQuestionTypeTag = (type) => {
    const types = {
      'single_choice': 'primary',
      'fill_in_the_blank': 'warning',
      'subjective': 'info'
    }
    return types[type] || 'info'
  }
  
  // 检查登录状态
  const checkLoginStatus = () => {
    const userId = sessionStorage.getItem('userId') || userStore.userId
    console.log('Current user ID:', userId)
    if (!userId) {
      ElMessage.error('请先登录')
      return null
    }
    return userId
  }
  
  // 获取错题列表
  const fetchWrongQuestions = async () => {
    const userId = checkLoginStatus()
    if (!userId) return
  
    loading.value = true
    try {
      console.log('请求参数:', { subjectCode: subjectCode.value, examType: examType.value })
      
      // 获取所有数据，不分页
      let response
      switch (sortType.value) {
        case 'count':
          response = await axios.get(`/api/wrong-questions/by-count/${userId}`, {
            params: { page: 1, size: 10000, subjectCode: subjectCode.value, examType: examType.value }
          })
          break
        case 'subject':
          response = await axios.get(`/api/wrong-questions/by-subject-chapter/${userId}`, {
            params: { page: 1, size: 10000, subjectCode: subjectCode.value, examType: examType.value }
          })
          break
        case 'time':
          response = await axios.get(`/api/wrong-questions/by-time/${userId}`, {
            params: { asc: timeOrder.value, page: 1, size: 10000, subjectCode: subjectCode.value, examType: examType.value }
          })
          break
      }
      console.log('后端返回的原始数据:', response.data)
      
      // 确保 response.data 是数组或包含 data 数组的对象
      let dataArray;
      if (Array.isArray(response.data)) {
        dataArray = response.data;
      } else if (response.data && Array.isArray(response.data.data)) {
        dataArray = response.data.data;
      } else {
        console.error('后端返回的数据格式不正确:', response.data);
        questions.value = [];
        total.value = 0;
        return;
      }
      
      // 获取所有题目的详细信息
      const questionDetails = await Promise.all(
        dataArray.map(async (item) => {
          try {
            const detailResponse = await axios.get(`/api/questions/${item.questionId}`);
            console.log(`题目 ${item.questionId} 的详情:`, detailResponse.data);
            return detailResponse.data;
          } catch (error) {
            console.error(`获取题目 ${item.questionId} 详情失败:`, error);
            return null;
          }
        })
      );
  
      // 合并错题记录和题目详情
      const allQuestions = dataArray.map((item, index) => {
        const detail = questionDetails[index];
        console.log('题目详情:', detail);
        
        // 处理选项数据
        let options = [];
        if (detail?.options) {
          try {
            if (typeof detail.options === 'string') {
              const parsedOptions = JSON.parse(detail.options);
              if (typeof parsedOptions === 'object' && !Array.isArray(parsedOptions)) {
                options = Object.values(parsedOptions);
              } else {
                options = Array.isArray(parsedOptions) ? parsedOptions : [];
              }
            } else if (Array.isArray(detail.options)) {
              options = detail.options;
            } else if (typeof detail.options === 'object') {
              options = Object.values(detail.options);
            }
            console.log('处理后的选项:', options);
          } catch (e) {
            console.error('解析选项数据失败:', e);
            options = [];
          }
        }
        
        return {
          ...item,
          questionType: item.questionType || 'unknown',
          wrongCount: item.wrongCount || 1,
          lastWrongTime: item.lastWrongTime,
          options: options,
          content: detail?.content || item.content,
          subjectName: item.subjectName || '未知',
          answer: detail?.answer,
          userAnswer: item.userAnswer,
          analysis: detail?.analysis,
          isFavorite: item.isFavorite === true  // 确保 isFavorite 是布尔值
        };
      });
  
      // 应用搜索过滤
      let filteredQuestions = allQuestions;
      if (searchQuery.value) {
        const query = searchQuery.value.trim().toLowerCase();
        filteredQuestions = allQuestions.filter(question => 
          question.content.toLowerCase().includes(query) ||
          question.subjectName.toLowerCase().includes(query)
        );
      }
  
      // 更新总数
      total.value = filteredQuestions.length;
  
      // 前端分页处理
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      questions.value = filteredQuestions.slice(start, end);
  
    } catch (error) {
      console.error('获取错题列表失败:', error)
      ElMessage.error('获取错题列表失败')
    } finally {
      loading.value = false
    }
  }
  
  // 获取最新答题记录
  const getLatestAnswerRecord = async (questionId, userId) => {
    try {
      const response = await axios.get(`/api/answer-records/latest`, {
        params: { userId, questionId }
      });
      return response.data;
    } catch (error) {
      console.error('获取最新答题记录失败:', error);
      return null;
    }
  };
  
  // 查看题目详情
  const showQuestionDetail = async (question) => {
    currentQuestion.value = question;
    dialogVisible.value = true;
    const userId = checkLoginStatus();
    if (userId) {
      const latestRecord = await getLatestAnswerRecord(question.questionId, userId);
      console.log('Latest answer record:', latestRecord);
      if (latestRecord) {
        currentQuestion.value.latestAnswer = latestRecord.answer;
        currentQuestion.value.isCorrect = latestRecord.isCorrect;
        console.log('Updated currentQuestion:', currentQuestion.value);
      } else {
        currentQuestion.value.latestAnswer = null;
        currentQuestion.value.isCorrect = null;
        console.log('No latest answer record found');
      }
    }
  };
  
  // 搜索处理
  const handleSearch = () => {
    currentPage.value = 1
    fetchWrongQuestions()
  }
  
  // 分页处理
  const handleSizeChange = (val) => {
    pageSize.value = val
    currentPage.value = 1
    fetchWrongQuestions()
  }
  
  const handleCurrentChange = (val) => {
    currentPage.value = val
    fetchWrongQuestions()
  }
  
  // 表格行样式
  const tableRowClassName = ({ rowIndex }) => {
    return rowIndex % 2 === 0 ? 'even-row' : 'odd-row'
  }
  
  // 关闭弹窗
  const handleDialogClose = () => {
    dialogVisible.value = false
    currentQuestion.value = null
  }
  
  const handleSortChange = (type) => {
    sortType.value = type
    fetchWrongQuestions()
  }
  
  const handleTimeOrderChange = () => {
    timeOrder.value = !timeOrder.value
    fetchWrongQuestions()
  }
  
  // 切换收藏状态
  const toggleFavorite = async (question) => {
    try {
      const userId = checkLoginStatus()
      if (!userId) return
  
      // 如果已经收藏，显示确认对话框
      if (question.isFavorite) {
        try {
          await ElMessageBox.confirm(
            '确定要取消收藏这道题目吗？',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          )
        } catch (e) {
          // 用户点击取消
          return
        }
      }
  
      console.log('Toggling favorite:', {
        userId,
        questionId: question.questionId,
        isFavorite: !question.isFavorite
      })
  
      const response = await axios.post('/api/wrong-questions/toggle-favorite', {
        userId: Number(userId),
        questionId: Number(question.questionId),
        isFavorite: !question.isFavorite
      })
  
      console.log('Toggle favorite response:', response.data)
  
      if (response.data.success) {
        question.isFavorite = !question.isFavorite
        ElMessage.success(question.isFavorite ? '收藏成功' : '取消收藏成功')
      } else {
        ElMessage.error(response.data.message || '操作失败')
      }
    } catch (error) {
      console.error('收藏操作失败:', error)
      if (error.response) {
        console.error('Error response:', error.response.data)
        ElMessage.error(error.response.data.message || '操作失败')
      } else {
        ElMessage.error('操作失败')
      }
    }
  }
  
  const getAnswerIndex = (answer, options) => {
    if (!answer || !options || !Array.isArray(options)) {
      return null;
    }
  
    // 如果答案是字母（A、B、C等），直接返回对应的索引
    if (typeof answer === 'string' && /^[A-Z]$/.test(answer)) {
      return answer.charCodeAt(0) - 65; // A=0, B=1, C=2, ...
    }
  
    // 如果答案是数字字符串，转换为数字
    if (typeof answer === 'string' && /^\d+$/.test(answer)) {
      const num = parseInt(answer);
      if (num >= 0 && num < options.length) {
        return num;
      }
    }
  
    // 如果答案是数字，直接使用
    if (typeof answer === 'number' && answer >= 0 && answer < options.length) {
      return answer;
    }
  
    // 如果答案是选项内容，查找匹配的选项
    if (typeof answer === 'string') {
      const index = options.findIndex(opt => {
        if (typeof opt === 'object') {
          const key = Object.keys(opt)[0];
          return opt[key] === answer;
        }
        return opt === answer;
      });
      if (index !== -1) {
        return index;
      }
    }
  
    return null;
  }
  
  const handleSubjectChange = () => {
    currentPage.value = 1
    fetchWrongQuestions()
  }
  
  // 新增的计算属性和方法
  const currentDateComputed = computed(() => {
    const now = new Date()
    const week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
    return `${now.getFullYear()}年${now.getMonth()+1}月${now.getDate()}日 ${week[now.getDay()]}`
  })

  const favoriteCount = computed(() => {
    return questions.value.filter(q => q.isFavorite).length
  })

  const getTimeGreeting = () => {
    const hour = new Date().getHours()
    if (hour < 6) return "深夜时光，注意休息"
    if (hour < 9) return "早上好，新的一天开始了"
    if (hour < 12) return "上午好，保持专注"
    if (hour < 14) return "中午好，适当休息"
    if (hour < 18) return "下午好，继续努力"
    if (hour < 22) return "晚上好，今天辛苦了"
    return "夜深了，早点休息"
  }

  const getMostWrongSubject = () => {
    const subjectCounts = {}
    questions.value.forEach(q => {
      const subject = q.subjectName || '未知'
      subjectCounts[subject] = (subjectCounts[subject] || 0) + q.wrongCount
    })
    let maxSubject = '未知'
    let maxCount = 0
    for (const [subject, count] of Object.entries(subjectCounts)) {
      if (count > maxCount) {
        maxCount = count
        maxSubject = subject
      }
    }
    return maxSubject
  }

  const getLearningSuggestion = () => {
    const suggestions = [
      "建议每天固定时间复习错题，保持学习的连续性。",
      "对于高频错题，建议制作错题本，重点攻克。",
      "定期回顾已掌握的题目，巩固知识点。",
      "多关注错题解析，理解解题思路。",
      "建议按科目分类整理错题，便于系统复习。"
    ]
    const today = new Date().getDate()
    return suggestions[today % suggestions.length]
  }
  
  onMounted(() => {
    if (checkLoginStatus()) {
      fetchWrongQuestions()
    }
  })
  </script>
  
  <style scoped>
  /* 主布局 */
  .main-layout {
    padding: 20px;
    min-height: 100vh;
    background: 
      radial-gradient(circle at 20% 80%, rgba(64, 158, 255, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(103, 194, 58, 0.05) 0%, transparent 50%),
      linear-gradient(135deg, #f5f7fa 0%, #f8fafe 100%);
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* 顶部区域 */
  .top-section {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
  }

  .header-card {
    flex: 1.2;
    min-width: 0;
  }

  .stats-card {
    flex: 0.8;
    min-width: 0;
  }

  /* 卡片通用样式 */
  .header-card,
  .question-card,
  .stats-card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.08);
    border: 1px solid #e4e7ed;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .header-card::before,
  .question-card::before,
  .stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #409eff, #66b1ff, #409eff);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
  }

  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  /* 页面头部 */
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    position: relative;
    z-index: 1;
  }

  .title-section .main-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #303133;
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .title-icon {
    color: #409eff;
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(64, 158, 255, 0.3));
  }

  .subtitle {
    font-size: 14px;
    color: #909399;
    margin: 0;
  }

  .date-section {
    text-align: right;
  }

  .date {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 4px;
  }

  .time-greeting {
    font-size: 14px;
    color: #606266;
  }

  /* 统计卡片 */
  .stats-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .stat-item {
    text-align: center;
    padding: 12px;
    background: linear-gradient(135deg, #f8f9fa, #f0f2f5);
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .stat-value {
    font-size: 20px;
    font-weight: 600;
    color: #409eff;
    margin-bottom: 6px;
  }

  .stat-label {
    font-size: 13px;
    color: #606266;
  }

  /* 错题列表 */
  .question-card {
    margin-bottom: 20px;
  }

  .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #303133;
    position: relative;
    z-index: 1;
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
  }

  .header-icon {
    color: #409eff;
    font-size: 16px;
    padding: 4px;
    background: rgba(64, 158, 255, 0.1);
    border-radius: 6px;
    transition: all 0.3s ease;
  }

  .header-title {
    font-size: 16px;
  }

  .header-extra {
    margin-left: auto;
    display: flex;
    gap: 8px;
  }

  /* 搜索和筛选区域 */
  .filter-content {
    padding: 12px;
    border-bottom: 1px solid #ebeef5;
  }

  .search-section {
    margin-bottom: 12px;
  }

  .search-input {
    width: 100%;
  }

  .filter-section {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .filter-select {
    width: 160px;
  }

  .filter-btn {
    margin-left: auto;
  }

  /* 表格样式 */
  .table-container {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }

  :deep(.el-table) {
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  :deep(.el-table th) {
    background: linear-gradient(135deg, #fafafa, #f5f5f5);
    color: #606266;
    font-weight: 600;
    border-bottom: 1px solid #ebeef5;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    padding: 12px 8px;
  }

  :deep(.el-table td) {
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.3s ease;
    padding: 12px 8px;
  }

  :deep(.el-table tr:hover td) {
    background: linear-gradient(135deg, #f8fafe, #f0f9ff);
  }

  /* 题目内容样式 */
  .question-content {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
    padding: 4px 0;
  }

  .question-text {
    font-size: 14px;
    color: #303133;
    margin-bottom: 6px;
  }

  .options {
    margin-top: 8px;
    padding-left: 16px;
    font-size: 13px;
  }

  .option-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px;
    padding: 6px;
    border-radius: 4px;
    background-color: #f5f7fa;
    transition: all 0.3s ease;
  }

  .option-item:hover {
    background-color: #ecf5ff;
    transform: translateX(4px);
  }

  .option-label {
    font-weight: bold;
    margin-right: 12px;
    min-width: 24px;
    color: #409EFF;
  }

  .option-content {
    flex: 1;
    color: #606266;
    line-height: 1.5;
  }

  /* 操作按钮 */
  .action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
  }

  .action-btn {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  .action-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.6s ease;
    transform: translate(-50%, -50%);
  }

  .action-btn:hover::before {
    width: 100px;
    height: 100px;
  }

  .action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  /* 分页 */
  .pagination {
    padding: 20px;
    display: flex;
    justify-content: center;
    background-color: #fff;
    border-top: 1px solid #ebeef5;
  }

  /* 题目详情弹窗 */
  .question-dialog {
    :deep(.el-dialog__header) {
      margin: 0;
      padding: 20px;
      border-bottom: 1px solid #ebeef5;
    }

    :deep(.el-dialog__body) {
      padding: 0;
    }

    :deep(.el-dialog__footer) {
      padding: 20px;
      border-top: 1px solid #ebeef5;
    }
  }

  .question-detail {
    padding: 20px;
  }

  .detail-section {
    margin-bottom: 24px;
  }

  .detail-section h3 {
    font-size: 16px;
    color: #303133;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebeef5;
  }

  .answer-content {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-top: 8px;
  }

  .analysis-content {
    padding: 16px;
    background: #f0f9ff;
    border-radius: 6px;
    margin-top: 8px;
    line-height: 1.6;
    color: #606266;
  }

  /* 响应式设计 */
  @media (max-width: 1200px) {
    .main-layout {
      padding: 16px;
    }
    
    .top-section {
      flex-direction: column;
    }
    
    .header-card,
    .stats-card {
      width: 100%;
    }
  }

  @media (max-width: 768px) {
    .main-layout {
      padding: 12px;
    }
    
    .header-content {
      flex-direction: column;
      gap: 12px;
    }
    
    .date-section {
      text-align: left;
    }
    
    .title-section .main-title {
      font-size: 22px;
    }
    
    .filter-section {
      flex-direction: column;
      align-items: stretch;
    }
    
    .filter-select {
      width: 100%;
    }
    
    .action-buttons {
      flex-direction: column;
      gap: 4px;
    }
  }

  @media (max-width: 480px) {
    .main-layout {
      padding: 8px;
    }
    
    .dialog-footer {
      flex-direction: column;
      gap: 8px;
    }
    
    .dialog-footer .el-button {
      width: 100%;
    }
  }
  </style> 